Hello! Thanks for this contribution. I could certainly use help with ARIA.

I currently use aria-selected over aria-hidden because Flickity carousels allows for multiple cells to be viewable in the viewport AND multiple cells to be selected with groupCells. If there's a better ARIA attribute to use to accommodate that behavior, I'm open!

Yes, aria-hidden is a better ARIA attribute to use than aria-selected.

The patch is more or less a straight replacement of aria-selected for aria-hidden so it works the same on multiple cells and groupCells as the current implementation. The primary issue is aria-selected is inappropriate for a div (any ARIA role) or list item (listitem ARIA role) because neither role allows aria-selected as an attribute. The aria-selected attribute is reserved for gridcell, option, row, tab, columnheader, menuitemradio, radio, rowheader, and treeitem ARIA roles:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-selected

Thanks for providing this info. I still feel that aria-hidden is not the correct attribute, as it signifies that the content is not visible. That said, perhaps a better solution is to select a role to use — although there doesn't seem to be an obvious option.

I believe the thinking is that slides not visible to sighted users (off screen or out of view of the flickity viewport in this case) should also not be available to unsighted users (via aria-hidden). The two links in the first comment both implement their carousels with aria-hidden so I'd trust what the W3 and Athena ICT is recommending...

Okay then. If you want to add aria-hidden to cells outside the viewport, that would require additional code to calculate which cells are and are not visible. That I can get behind. But for now, this PR only changes aria-hidden on the selected cells.

I don't see a need for additional code. The patch is a replacement of the aria-selected attribute for aria-hidden attribute. The inactive slides are the ones that need to be targeted with aria-hidden which is what is already happening with aria-selected="false" in the current implementation.

Okay. I feel we're talking past each other now. I appreciate your contribution and the discussion, but I'm going to pass on this PR.

That's unfortunate. If you'd like test results you can simply use Chrome to observe the difference. Please let me know if you have any further questions or decide to reconsider.

Chrome > Audits > Perform an audit...

Results for https://flickity.metafizzy.co/

Results with my patch:

I agree with Daniel on this issue and would like to see the aria-selected replaced with aria-hidden

First step would be adding API to get visible elements in viewport. #638

I respectfully disagree. There is no reason this patch can‘t (or shouldn‘t) be implemented right now without an “API to get visible elements in the viewport.” This patch is nothing more than a fix to a misused and misunderstood ARIA attribute (aria-selected). It is true that such an API would improve this accessibility feature since using wrapAround breaks it with or without the patch, but an API is not a required first step to fixing which ARIA attribute is actually used.

When this will get merged?

This feature is now merged and will go out in Flickity v2.2.0.

@danielkorte Thank you for your contribution and for helping me see the light on this one. Sorry it took so long to make it in

This fix has been released with v2.2.0. Thanks again!

Hi @desandro : when we enabling the voice over and accessibility carousel scrolling not working with Three-finger triple tap in Safari browser in all ios device. android application is working fine. please let us know if you have solution. i have applied accessibility improvement PR, but it is not helping. please let me know if any vanila js fix for this issue.